<template>
  <div>
    <baseContainer title="基础按钮">
      <x-button type="primary">按钮1</x-button>
    <x-button type="warning">按钮2</x-button>
    <x-button type="danger" round>按钮3</x-button>
    <x-button type="danger" icon="x-icon-kaitonghuiyuan">按钮3</x-button>
    </baseContainer>
    <baseContainer title="禁用按钮">
      <x-button type="primary" disabled>按钮1</x-button>
    <x-button type="warning" disabled>按钮2</x-button>
    <x-button type="danger" round disabled>按钮3</x-button>
    <x-button type="danger" icon="x-icon-kaitonghuiyuan" disabled>按钮3</x-button>
    </baseContainer>
    <baseContainer title="调整尺寸">
      <x-button type="primary" size="small">按钮1</x-button>
      <x-button type="primary" size="default">按钮2</x-button>
      <x-button type="primary" size="large">按钮3</x-button>
    </baseContainer>
    <baseContainer title="按钮组">
      <x-button-group>
      <x-button type="primary" icon="x-icon-kaitonghuiyuan"></x-button>
      <x-button type="primary">哈哈</x-button>
    </x-button-group>
    </baseContainer>
    <baseContainer title="加载按钮">
    <x-button type="primary" loading>loading</x-button>
    <x-button type="primary" loading loading-icon="x-icon-jiazai">loading</x-button>
    </baseContainer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import baseContainer from './baseContainer.vue'

export default defineComponent({
  components: {
    baseContainer
  },
  setup () {
    

    return {}
  }
})
</script>

<style scoped>

</style>